<!--
 * @Author: wangshuguang
 * @Date: 2022-02-16 14:23:49
 * @LastEditTime: 2022-08-26 16:39:15
 * @LastEditors: wangshuguang
 * @Description: 商户通用配置
-->
<template>
  <el-card class="common-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="机构/业务编号">
        <el-input v-model="listQuery.deptInfo" placeholder="机构/业务编号" size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round size="small" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table size="medium" :data="list" border>
      <el-table-column label="序号" width="50" prop="id">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="deptName" align="center" label="机构" />
      <el-table-column prop="deptId" align="center" label="业务编码" />
      <el-table-column label="配送信息" align="center">
        <template slot="header">
          配送信息
          <el-tooltip
            class="item"
            effect="dark"
            placement="top"
          >
            <div slot="content">
              <div>维权期用于限制用户能够在多少天内对业务订单发起售后，<br>以及业务订单产生的奖励固定在多少天之后强制下发，<br>无维权期指用户无法发起售后同时订单奖励即时下发</div>
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </template>
        <el-table-column prop="sc" align="center" label="商城">
          <template slot-scope="scope">
            <div>物流订单：{{ formatText(scope.row.logisticsDay) }}</div>
            <div>外卖订单：{{ formatText(scope.row.takeOutDay) }}</div>
            <div>自提订单：{{ formatText(scope.row.pickUpDay) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="dc" align="center" label="点餐">
          <template slot-scope="scope">
            <div>先付后吃订单：{{ formatText(scope.row.beforeEatDay) }}</div>
            <div>先吃后付订单：{{ formatText(scope.row.afterEatDay) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="yd" align="center" label="预订">
          <template slot-scope="scope">
            <div>全日房订单：{{ formatText(scope.row.allRoomDay) }}</div>
            <div>钟点房订单：{{ formatText(scope.row.hourRoomDay) }}</div>
            <div>KTV订单：{{ formatText(scope.row.ktvDay) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="yy" align="center" label="预约">
          <template slot-scope="scope">
            <div>预约订单：{{ formatText(scope.row.subscribeDay) }}</div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="updateTime" align="center" label="更新时间">
        <template slot-scope="scope">{{ dayjs(new Date(scope.row.updateTime)).format('YYYY-MM-DD HH:mm:ss') }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <!-- <el-button size="small" type="primary" @click="viewData(scope.row)">详情</el-button> -->
          <el-button size="small" type="primary" @click="editdata(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      :title="infoConfig.title"
      :visible.sync="infoVisible"
      size="50%"
      direction="rtl"
    >
      <mercDialogData
        v-if="infoVisible"
        :info-config="infoConfig"
        @sucClose="sucClose"
        @close="infoVisible = false"
      />
    </el-drawer>
  </el-card>
</template>

<script>

import { getOrgGeneralConfList } from '@/api/mercComConfig'
import mercDialogData from './mercDialogData.vue'
import dayjs from 'dayjs'

export default {
  components: { mercDialogData },
  data() {
    return {
      dayjs,
      infoVisible: false,
      infoConfig: {
        title: '',
        data: {}
      },
      form: {},
      scope: 0,
      total: 0,
      statusOptions: ['停用', '正常'],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        deptInfo: ''
      },
      list: []
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    formatText(val) {
      if (val && val != '0') {
        return val + '天'
      }
      return '无维权期'
    },
    sucClose() {
      this.infoVisible = false
      this.fetchData()
    },
    editdata(data) {
      this.infoConfig = {
        type: 'edit',
        title: '编辑',
        data
      }
      this.infoVisible = true
    },
    viewData(data) {
      this.infoConfig = {
        type: 'detail',
        title: '详情',
        data
      }
      this.infoVisible = true
    },
    fetchData() {
      getOrgGeneralConfList(this.listQuery).then(res => {
        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.total
          console.log('list', this.list)
        }
      })
    },
    handleEdit(user) {
      this.$refs.userDialog.openEdit(user.id).then(() => {
        this.fetchData()
      })
    },

    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleResetPassword(user) {
      this.$refs.resetPw.open(user.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.search-container {
	margin-top: 20px;
	margin-bottom: 20px;
}

.search-wrap {
	width: 300px;
	margin-right: 10px;
}
.el-button--primary:hover,
.el-button--primary:focus {
	background-color: $btnBgc;
	border-color: $btnBgc;
}
</style>
